<template>
  <view>
    <my-search @click="gotoSearch" ></my-search>
	<view class="cate-container">
		<!-- 左边的纵向滚动栏 -->
    <scroll-view class="cate-left" scroll-y :style="{height: wh + 'px'}">
      <view :class="['cate-item', active===i ? 'active':'']" v-for="(item, i) in cateList" :key="i" @click="activeChanged(i)">{{item.cat_name}}</view>
     
    </scroll-view>
    <!-- 右边的纵向滚动栏 -->
    <scroll-view class="cate-right" scroll-y :style="{height: wh + 'px'}" :scroll-top="{scrollTop}">
      <view class="cate-item " v-for="(item, i) in cateList[active].children" :key="i">
        <view class="cate1">/{{item.cat_name}}/</view>
        <view class="cate2-box">
          <view class="cate2-item" v-for="(item2, i2) in item.children" :key="i2" @click="gotoGoodsList(item2)">
            <image :src="item2.cat_icon"></image>
            <view>{{item2.cat_name}}</view>
          </view>
        </view>
      </view>
    </scroll-view>
	</view>
  </view>
</template>

<script>
	export default {
    onLoad() {
      const sysInfo = uni.getSystemInfoSync();
      this.wh = sysInfo.windowHeight;
      this.getCateList()
    },
    methods:{
      gotoSearch(){
        console.log('分类页面')
        uni.navigateTo({
          url:'../../subpkg/search/search'
        })
      },
      gotoGoodsList(item2){
        uni.navigateTo({
          url:'/subpkg/goods_list/goods_list?cid=' + item2.cat_id
        })
      },
      activeChanged(i){
        this.active = i
        if(this.scrollTop === 0) {
          this.scrollTop = 1;
        } else {
          this.scrollTop = 0;
        }
      },
      async getCateList() {
        const {data: res} = await uni.$http.get('/api/public/v1/categories')
        console.log(res)
        if(res.meta.status !== 200) return uni.$showMsg()
        
        res.message?.forEach(cate1 => {
          cate1.children?.forEach(cate2 => {
            cate2.children?.forEach(cate3 => {
              // debugger
              cate3.cat_icon = cate3.cat_icon?.replace('api-ugo-dev', 'api-ugo-web')
            })
          })
        });
        this.cateList = res.message
      },
    },
		data() {
			return {
				// 可用window的高度
        wh: 0,
        cateList: [],
        cateLv2List:[],
        scrollTop: 0,
        active:0
			};
		}
	}
</script>

<style lang="scss">
.cate-container{
  display: flex;
  flex-direction: row;
  .cate-left{
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #F1F1F1;
    .cate-item{
      width: 160rpx;
      height: 80rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      padding: 20rpx;
      &.active{
        background-color: white;
        position: relative;
        &::before {
          content: ' ';
          display: block;
          height: 80rpx;
          width: 6rpx;
          position: absolute;
          left: 0;
          top:12.5%;
          background-color: #C00000;
        }
      }
    }
  }
  .cate-right{
    .cate-item{
      .cate1{
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20rpx;
        font-size: 16px;
        font-weight: bold;
      }
      .cate2-box{
        display: flex;
        flex-direction: row;
        align-items: center;
        // justify-content: space-around;
        flex-wrap: wrap;
        font-size: 12px;
        .cate2-item{
          width: 22%;
          padding: 20rpx;
          image{
            height: 100rpx;
            width: 100rpx;
          }
        }
        
      }
    }
  }
}
</style>
